﻿<!DOCTYPE html>
<html>
<head>
    <title>Knockout - Live Example</title>
    <link rel="Stylesheet" type="text/css" href="css/themes/base/jquery.ui.all.css" />
    <link rel="Stylesheet" type="text/css" href="css/sparkline.css" />

    <script type="text/javascript" src="scripts/frameworks/jquery.js"></script>
    <script type="text/javascript" src="scripts/frameworks/jquery.tmpl.js"></script>
    <script type="text/javascript" src="scripts/frameworks/knockout-2.0.0.debug.js"></script>

    <script type="text/javascript" src="scripts/sparkline.js"></script>
    <script type="text/javascript" src="scripts/frameworks/jquery.sparkline.js"></script>
    <script type="text/javascript" src="scripts/ko.custom.bindings/knockout-sparkline.js"></script>

    <script type="text/javascript" src="scripts/frameworks/jquery-ui.js"></script>
    <script type="text/javascript" src="scripts/ko.custom.bindings/knockout-jquery-ui-widget.js"></script>

    <script type="text/javascript">

        var ViewModel = function (model)
        {
            this.name = ko.observable('Everybody');

            this.dataValues = ko.observable();
            this.showChartData = ko.observable(true);
            this.renderedChartData = ko.computed(function ()
            {
                return $(renderDataGrid(this.dataValues())).html();
            }, this);

            this.loadNewChart = function ()
            {
                this.dataValues(model.loadNewChartData(MyMath.random(30, 50)));
            };

            this.leftHandleValue = ko.observable();
            this.rightHandleValue = ko.observable();

            this.openPrice = ko.computed(function ()
            {
                return safeArrayItemByIndex(this.dataValues(), this.leftHandleValue());
            }, this);

            this.closePrice = ko.computed(function ()
            {
                return safeArrayItemByIndex(this.dataValues(), this.rightHandleValue());
            }, this);

            this.dataValues.subscribe(function (newDataValues)
            {
                this.leftHandleValue(0);
                this.rightHandleValue(newDataValues.length - 1);
            }, this);

            this.selectedRange = ko.computed(function ()
            {
                return [this.leftHandleValue(), this.rightHandleValue()];
            }, this);

            this.sliderOptions = ko.computed(function ()
            {
                var dataValues = this.dataValues();

                var options =
                {
                    range: true,
                    min: 0,
                    max: (dataValues ? dataValues.length - 1 : 0),
                    values: this.selectedRange(),
                    slide: function (event, ui)
                    {
                        this.leftHandleValue(ui.values[0]);
                        this.rightHandleValue(ui.values[1]);
                    } .bind(this)
                };
                return options;
            }, this);

            this.statistics = ko.computed(function ()
            {
                var statistics =
                {
                    min: MyMath.min(this.dataValues(), this.selectedRange()),
                    max: MyMath.max(this.dataValues(), this.selectedRange()),
                    median: MyMath.median(this.dataValues(), this.selectedRange())
                };
                return statistics;
            }, this);
        };

        $(document).ready(function ()
        {
            var viewModel = new ViewModel(new Model());
            viewModel.loadNewChart();
            ko.applyBindings(viewModel);
        });

    </script>
</head>
<body>
    <div class="panel view">
        <h1>View:</h1>
        <h2>Hello <span id="greetings-name" data-bind="text: name">World</span>!</h2>
        <div class="diagram">
            <div class="dynamicsparkline" data-bind="sparkline: dataValues, sparklineOptions: { type: 'line', spotRadius: 0, width: 300, height: 50 }">Loading...</div>
            <div class="slider-range" data-bind="jqueryui: { widget: 'slider', options: sliderOptions }"></div>
        </div>
        <div class="selected-date-range">
            <h2>Prices:</h2>
            <div>Open Price: <span class="start" data-bind="text: openPrice"></span></div>
            <div>Close Price: <span class="end" data-bind="text: closePrice"></span></div>
        </div>
        <div class="statistics">
            <h2>Statistics:</h2>
            <div class="statistics-content" data-bind="template: {name: 'StatisticsTmpl', data: statistics }">
                <div>Min: </div>
                <div>Max: </div>
                <div>Median: </div>
            </div>
        </div>
    </div>
    <div class="panel controller">
        <h1>Controller:</h1>
        <div>
            <span>Name:</span>
            <input type="text" id="name" data-bind="value: name, valueUpdate: 'afterkeydown'" />
        </div>
        <div>
            <span>Start:</span>
            <input type="text" id="left-handle-position" data-bind="value: leftHandleValue" />
        </div>
        <div>
            <span>End:</span>
            <input type="text" id="right-handle-position" data-bind="value: rightHandleValue" />
        </div>
        <div>
            <input type="checkbox" id="show-chart-data-checkbox" data-bind="checked: showChartData" />
            <label for="show-chart-data-checkbox">Show Chart Data</label>
        </div>
        <button id="new-chart-button" type="button" data-bind="click: loadNewChart">New random chart</button>
    </div>
    <div class="panel chart-data" data-bind="visible: showChartData">
        <h1>Chart Data:</h1>
        <table class="data" data-bind="html: renderedChartData"></table>
    </div>

    <script id="StatisticsTmpl" type="text/html">
        <div>Min: <span class="min">${min}</span></div>
        <div>Max: <span class="max">${max}</span></div>
        <div>Median: <span class="median">${median}</span></div>
    </script>
</body>
</html>
